<template>
    <div id="app">
        <div id="cover"></div>
        <Header></Header>
        <!-- <p>{{fullName}} {{counter}}</p>
        <p>{{textA}}</p>
        <p>{{textB}}</p>
        <p>{{textC}}</p>
        <p>{{textPlus}}</p> -->
        <!-- <router-link to="/app/123">app</router-link>
        <router-link to="/app/456">app</router-link>
        <router-link to="/login">login</router-link> -->
        <!-- <Todo></Todo> -->
<!--         <tabs>
          <tab lable="text">
            <span slot="label"></span>
            <p>This is tab content</p>
          </tab>
        </tabs>
        <ul>
          <li>labe1</li>
          <li>labe2</li>
        </ul>
        <div class="tab-container">
          <p>This is tab container</p>
        </div> -->
        <TabsTodo></TabsTodo>
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
        <!-- <button @click="notify"> click me</button> -->
        <!-- <notification content="test notify"/> -->
        <!-- <Footer></Footer> -->
          <!-- <router-view name="a"/> -->
    </div>
</template>

<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import Todo from './views/todo/todo.vue'
import TabsTodo from './views/todo/tabs-todo.vue'
// import Notification from './components/notification/notification.vue'
// import {
//   mapState,
//   mapGetters,
//   mapActions,
//   mapMutations
// } from 'vuex'

export default {
  components: {
    Header,
    Footer,
    Todo,
    TabsTodo
    // Notification
  },
  methods: {
    notify () {
      this.$notify({
        content: 'test notify',
        btn: 'close'
      })
    }
    // ...mapActions(['updateCountAsync']),
    // ...mapMutations(['updateCount'])
  },
  mounted () {

    // console.log(this.$store)
    // this.$store.state.count = 3

    // mutations 同步处理
    // let i = 1
    // setInterval(() => {
    //   this.$store.commit('updateCount', {
    //     num: i++,
    //     num2: 2
    //   })
    // }, 1000)

    // actions 异步处理
    // this.$store.dispatch('updateCountAsync', {
    //   num: 5,
    //   time: 2000
    // })

    // this.updateCountAsync({
    //   num: 5,
    //   time: 2000
    // })

    // this['a/add']()
    // this['a/updateText']('123')

    // let i = 1
    // setInterval(() => {
    //   this.updateCount({
    //     num: i++,
    //     num2: 2
    //   })
    // }, 1000)
  },
  computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    // textB () {
    //   return this.$store.state.b.text
    // },
    // count () {
    //   return this.$store.state.count
    // },
    // ...mapState({
    //   // counter: 'count'
    //   counter: (state) => state.count,
    //   textA: (state) => state.a.text,
    //   textB: (state) => state.b.text,
    //   textC: (state) => state.c.text
    // }),
    // ...mapGetters({
    //   'fullName': 'fullName',
    //   textPlus: 'a/textPlus'
    // })

    // fullName () {
    //   return this.$store.getters.fullName
    // }
  }

}
</script>

<style lang="stylus" scoped>
#app
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    #cover
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        background-color #999
        opacity 0.2
        z-index -1

</style>
